<template>
	<view v-if="number==3" class="icon-box-bao" :style="computedStyles " style="padding: 5rpx;">
		{{index}}<text style="font-size: 18rpx;">{{baifenhao}}</text>
	</view>
	<view v-else-if="number==2" class="icon-box-wen" :style="computedStyles" style="padding: 5rpx;">
		{{index}}<text style="font-size: 18rpx;">{{baifenhao}}</text>
	</view>
	<view v-else class="icon-box-chong" :style="computedStyles" style="padding: 5rpx;">
		{{index}}<text style="font-size: 18rpx;">{{baifenhao}}</text>
	</view>
</template>

<script>
	export default {
		name: "icon-index",
		props: {
			number: {
				default: 0
			},
			index: {
				type: String,
				default: '1'
			},
			fontsSize: {
				default: ''
			},
			baifenhao: {
				type: String,
				default: ''
			},
			posileft: {
				type: [String, Number],
				default: ''
			}
		},
		data() {
			return {

			};
		},
		computed: {
			computedStyles() {
				let styles = '';
				if (this.fontsSize) {
					styles += 'font-size:' + this.fontsSize + ';';
				}
				if (this.posileft > 0) {
					styles += 'left:' + this.posileft + 'rpx;';
				}
				return styles;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.icon-box-bao {
		width: 56rpx;
		height: 60rpx;
		background-image: url("https://mcdn.chatgk.com/xcx/static/images/icon/bao.png");
		background-repeat: no-repeat;
		background-size: contain;
		font-size: 32rpx;
		text-align: center;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 44rpx;
		position: absolute;
		top: 0;
		left: 40rpx;
	}

	.icon-box-wen {
		width: 56rpx;
		height: 60rpx;
		background-image: url("https://mcdn.chatgk.com/xcx/static/images/icon/wen.png");
		background-repeat: no-repeat;
		background-size: contain;
		font-size: 32rpx;
		text-align: center;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 44rpx;
		position: absolute;
		top: 0;
		left: 40rpx;
	}

	.icon-box-chong {
		width: 56rpx;
		height: 60rpx;
		background-image: url("https://mcdn.chatgk.com/xcx/static/images/icon/chong.png");
		background-repeat: no-repeat;
		background-size: contain;
		font-size: 32rpx;
		text-align: center;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 44rpx;
		position: absolute;
		top: 0;
		left: 40rpx;
	}
</style>